﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>示例</title>
    <link href="~/plugins/layui/css/layui.css" rel="stylesheet" />
    <script src="~/plugins/layui/layui.js" charset="utf-8"></script>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/lyUtils.js"></script>

</head>
<body>
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="请输入搜索的内容" />
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-normal addNews_btn">添加</a>
            </div>
            @*<div class="layui-inline">
                    <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
                </div>*@
        </form>
    </blockquote>
    <table class="layui-hide" id="test" lay-filter="demo"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>



    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>

        function data_string(str) {
            
            var d = eval('new ' + str.substr(1, str.length - 2));
            var ar_date = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
            for (var i = 0; i < ar_date.length; i++) ar_date[i] = dFormat(ar_date[i]);
            return ar_date.slice(0, 3).join('-') + ' ' + ar_date.slice(3).join(':');

            function dFormat(i) { return i < 10 ? "0" + i.toString() : i; }
        }

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
            var laydate = layui.laydate //日期
                , laypage = layui.laypage //分页
                , layer = layui.layer //弹层
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传
                , element = layui.element; //元素操作

            //向世界问个好
         //   layer.msg('Hello World');

            //执行一个 table 实例
            table.render({
                elem: '#test'
                , height: "full - 125"
                ,limit : 20
                , limits : [10,15,20,25]
                , url: '/DemoInfo/GetDataInfoList' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                      //{checkbox: true}, //其它参数在此省略
                    { field: 'id', title: 'ID', sort: true, fixed: 'left' }//固定列在左
                    , { field: 'name', title: '姓名', }
                    , { field: 'sex', title: '性别', }
                    , { field: 'age', title: '年龄', sort: true }
                    //, {
                    //    field: 'birthday', title: '生日',
                    //    //formatter: function (value, row, index) {
                           
                    //    //    return value.Tostring("YYYY");


                    //    //}
                    //    templet: function (d) {
                    //        return d.birthday.ToString(yyyy-MM-dd);
                    //    }
                    //}

                    , { field: 'birthday', title: '生日' }

                        //,{ field: 'birthday', title: '生日', templet: function(d)
                        //{
                        //    console.log(d);
                        //    return data_string(d.birthday);
                        //}}
                    //, { field: 'birthday', title: '发布时间', align: 'center',}
                    , { field: 'city', title: '城市', }
                    , { field: 'isenable', title: '是否启用', }
                    , { fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo' }

                ]]
            });
            //监听工具条
            table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if (layEvent === 'edit') {
                    layer.msg(data.id);
                 
                    layer.msg('编辑操作');

                    var index = layui.layer.open({
                        title: "编辑",
                        type: 2,
                        content: "/DemoInfo/ShowEditInfo?id=" + data.id,
                        success: function (layero, index) {
                            var body = layui.layer.getChildFrame('body', index);
                            if (edit) {
                                body.find(".newsName").val(edit.newsName);
                                body.find(".abstract").val(edit.abstract);
                                body.find(".thumbImg").attr("src", edit.newsImg);
                                body.find("#news_content").val(edit.content);
                                body.find(".newsStatus select").val(edit.newsStatus);
                                body.find(".openness input[name='openness'][title='" + edit.newsLook + "']").prop("checked", "checked");
                                body.find(".newsTop input[name='newsTop']").prop("checked", edit.newsTop);
                                form.render();
                            } 
                            setTimeout(function () {
                                layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                                    tips: 3
                                });
                            }, 500)
                        }
                    })
                    layui.layer.full(index);
                    //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
                    $(window).on("resize", function () {
                        layui.layer.full(index);
                    })

                }
            });



            //分页
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                , count: 100 //总页数
                , skin: '#1E9FFF' //自定义选中色值
                //,skip: true //开启跳页
                , jump: function (obj, first) {
                    if (!first) {
                        layer.msg('第' + obj.curr + '页');
                    }
                }
            });

            //上传
            upload.render({
                elem: '#uploadDemo'
                , url: '' //上传接口
                , done: function (res) {
                    console.log(res)
                }
            });


            //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
            $(".search_btn").on("click", function () {
                if ($(".searchVal").val() != '') {
                    table.reload("newsListTable", {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            key: $(".searchVal").val()  //搜索的关键字
                        }
                    })
                } else {
                    layer.msg("请输入搜索的内容");
                }
            });


            //添加按钮
            function add() {
                var index = layui.layer.open({
                    title: "添加",
                    type: 2,
                    content: "/DemoInfo/ShowAddInfo",
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        setTimeout(function () {
                            layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 500)
                    }
                })
                layui.layer.full(index);
                //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
                $(window).on("resize", function () {
                    layui.layer.full(index);
                })
            }
            $(".addNews_btn").click(function () {
                add();
            })
        });

    </script>
   
</body>
</html>
